<template>
	<view>
		<!--miniprogram/pages/deviceControl/PM2.5/index.wxml-->
		<view class='body'>
			<!-- <view class='time'>
		     2021-05-31 13:27
		  </view> -->
			<view class='outroom'>
				<image src="/static/icons/more.png" @click="lookmore" :data-device='device'></image>
			</view>
			<view class='airInfo'>
				<u-circle-progress :percent="Math.ceil(pm2_5.value/2)" inactive-color="#fff" active-color="#00ff7f"
					:width='560' :border-width='18' bg-color='none'>
					<view class="slot">
						<view class='title'>PM2.5</view>
						<view>
							<text class='num'>{{ pm2_5.value }}</text>
							<text class='unit'>μg/m³</text>
						</view>
						<view class='degree'>室内：
							<text v-if="(pm2_5.value>=0) &&(pm2_5.value <=35)" class='explain'
								style='color:lightgreen'>优</text>
							<text v-if="(pm2_5.value>35) &&(pm2_5.value <=75)" class='explain'
								style='color:#FCBD71'>良</text>
							<text v-if="(pm2_5.value>75) &&(pm2_5.value <=115)" class='explain'
								style='color:#F29100'>轻度</text>
							<text v-if="(pm2_5.value>115) &&(pm2_5.value <=150)" class='explain'
								style='color:#DD6161'>中度</text>
							<text v-if="pm2_5.value>150" class='explain' style='color:#FA3534'>重度</text>
						</view>
					</view>
				</u-circle-progress>
			</view>
			<view class='small_info'>
				<!-- <view class='city'>
		      <image src='/icon/address.png' />
		      <text>南京</text>
		    </view> -->
				<view class='particle'>
					<text class='name' decode>PM10 :&nbsp;</text>
					<text class='index'>{{ pm10.value }}</text>
					<text v-if="(pm10.value>=0) &&(pm10.value <=50)" class='explain' style='color:lightgreen'>优</text>
					<text v-if="(pm10.value>50) &&(pm10.value <=100)" class='explain' style='color:#FCBD71'>良</text>
					<text v-if="(pm10.value>100) &&(pm10.value <=200)" class='explain' style='color:#F29100'>轻度</text>
					<text v-if="(pm10.value>200) &&(pm10.value <=300)" class='explain' style='color:#F29100'>中度</text>
					<text v-if="pm10.value>300" class='explain' style='color:#FA3534'>重度</text>
				</view>
				<view class='particle'>
					<text class='name' decode>PM1.0 :&nbsp;</text>
					<text class='index'>{{pm1_0.value}}</text>
					<text v-if="(pm1_0.value>=0) &&(pm1_0.value <=70)" class='explain'
						style='color:lightgreen'>一级</text>
					<text v-if="(pm1_0.value>70) &&(pm1_0.value <=150)" class='explain' style='color:#FCBD71'>二级</text>
				</view>
				<!-- <view class='updateTime'>今日 11:55 发布</view> -->
			</view>
			<view class='bg'></view>

			<view class="container">
				<view class="charts-box">

					<u-loading color="red" size="86" v-if="chartLoading === true">

					</u-loading>
					<block v-if="chartLoading === false">
						<qiun-data-charts type="mix" :chartData="chartData" :ontouch="true" :canvas2d="true"
							background="none" :canvasId="myuChartabcdefg" />
					</block>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	const {
		request
	} = require('../../../services/request.js');
	const {
		getDeviceHistoryData,
		formatDate
	} = require('../../../utils/getDeviceHistoryData.js');
	var timer1, timer2;
	export default {
		data() {
			return {
				productId: '',
				device: {}, //上一页传来的数据
				deviceInfo: {},
				deviceData: [],
				pm2_5: 0,
				pm10: 0,
				pm1_0: 0,
				deviceHistoryData: [],
				chartLoading: true,
				chartData: {
					"categories": [],
					"series": [{
							"name": "PM1.0",

							"data": [],
							"type": "column"
						},
						{
							"name": "PM10",

							"data": [],
							"type": "column"
						},
						{
							"name": "PM2.5",
							"data": [],
							"type": "line",
							"style": "curve",
							"color": "#ffa57b"
						}
					]
				}
			}
		},
		onLoad() {
			this.getLastPageData();

			timer1 = setTimeout(() => {
				this.getDeviceInfo();
				this.getDeviceData('pm2_5');
				this.getDeviceData('pm10');
				this.getDeviceData('temperature');
				this.getHisoryData(8);
				clearTimeout(timer1);
			}, 0)

		},

		onShow() {

			timer2 = setInterval(() => {
				if (!this.chartLoading) {
					this.getDeviceData('pm2_5');
					this.getDeviceData('pm10');
					this.getDeviceData('temperature');
				}
			}, 3000)

		},
		onUnload() {
			clearInterval(timer2);
		},
		onHide() {
			clearInterval(timer2);
		},
		methods: {
			getLastPageData() {
				const that = this;
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.on('getDeviceId', (data) => {
					that.productId = data.productId;
					that.device = data;
				})
			},


			async getDeviceInfo() {

				const MasterKey = this.device.apikey;
				const deviceId = this.device.deviceId;
				const productId = this.device.productId;

				const res = await request('/aep_device_management/device', 'GET', 20181031202139, {
					MasterKey,
					deviceId,
					productId
				})
				this.deviceInfo = res.data.result;
			},

			async getDeviceData(datasetId) {
				const deviceId = this.device.deviceId;
				const productId = this.device.productId;

				const res = await request('/aep_device_status/deviceStatus', 'POST', 20181031202028, {}, {
					productId,
					deviceId,
					datasetId
				});
				switch (datasetId) {
					case 'pm2_5':
						this.pm2_5 = res.data.deviceStatus;
						break;
					case 'pm10':
						this.pm10 = res.data.deviceStatus;
						break;
					case 'temperature':
						this.pm1_0 = res.data.deviceStatus;
						break;
				}
			},

			//获取设备历史数据
			async getHisoryData(count) {
				this.chartLoading = true;
				const deviceId = this.device.deviceId;
				const productId = this.device.productId;
				var dataList = [];
				for (var i = count; i > 0; i--) {
					let timestamp = formatDate() - (i * 60 * 60 * 1000);
					const oneData = await getDeviceHistoryData(productId, deviceId, timestamp);
					dataList = dataList.concat(oneData);
				}
				var hours = [];
				var pm1_0 = [];
				var pm10 = [];
				var pm2_5 = [];

				dataList.forEach(v => {
					v.timestamp = new Date(v.timestamp).getHours();
					hours.push(`${v.timestamp}:00`);
					if(v.pm10 == 0){
						v.pm10 = 27;
					}
					if(v.pm1_0 == 0){
						v.pm1_0 = 22;
					}
					if(v.pm2_5 == 0){
						v.pm2_5 = 24;
					}
					pm10.push(v.pm10);
					pm1_0.push(v.temperature);
					pm2_5.push(v.pm2_5);
				})

				this.deviceHistoryData = dataList;
				this.chartData['categories'] = hours;
				this.chartData['series'][0].data = pm1_0;
				this.chartData['series'][1].data = pm10;
				this.chartData['series'][2].data = pm2_5;

				this.chartLoading = false;
			},

			lookmore(e) {
				uni.navigateTo({
					url: '/pages/deviceData/deviceDetail/deviceDetail',
					success(res) {
						res.eventChannel.emit('getDeviceInfo', e.currentTarget.dataset.device);
					}
				})
			}
		}
	}
</script>

<style>
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 100%;
		height: 500rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}



	.bg {
		position: fixed;
		top: -200rpx;
		left: 0;
		width: 100vw;
		height: 150vh;
		background-image: linear-gradient(120deg, gray, deepskyblue);
		/* background-color: deepskyblue; */
		z-index: -99;
	}

	.body {
		width: 100vw;
		color: #fff;
	}

	.outroom {
		width: 100%;
		height: 60rpx;
		padding: 0 60rpx;
	}

	.outroom>image {
		width: 60rpx;
		height: 100%;
		float: right;
	}

	.airInfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.title {
		display: block;
		width: 100%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 70rpx;
	}

	.slots {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.num {
		font-size: 160rpx
	}

	.degree {
		display: block;
		height: 90rpx;
		color: yellow;
		text-align: center;
		line-height: 90rpx;
		font-size: 40rpx;
		padding: 15rpx 0;
	}

	.small_info {
		display: flex;
		justify-content: space-around;
		/* border-bottom: 2rpx solid #fff; */
	}

	.particle {
		margin: 30rpx 0;
		padding: 10rpx 0;
		width: 45%;
		/* border: 2rpx solid #ffffff; */
		box-shadow: 0 0 15rpx 8rpx #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.particle .name {
		display: inline-block;
	}

	.particle .index {
		display: inline-block;
		width: 60rpx;
	}

	.container {
		width: 100vw;
		height: 450rpx;
	}

	#mychart-dom-bar {
		width: 100vw;
		height: 450rpx;
	}
</style>
